<template>
  <a-form :form="form" style="overflow: auto">
    <!-- <div>培养方案模板学分要求</div> -->
    <a-form-item label="学分要求说明" :labelCol="{span: 3}" :wrapperCol="{span: 21}">
      <a-input style="width: 100%" type="textarea" v-decorator="['xfyqsm',
        {
          rules: [{ required: true, message: '请填写学分要求说明!' }],
        }]" :autosize="{ minRows: 4, maxRows: 6 }"/>
    </a-form-item>
    <a-row class="credit-input-wrap">
      <a-col :span="2" class="credit-big-cate">{{ pymsmc }}</a-col>
      <a-col :span="5">
        <div class="half-height-block">
          <a-form-item
            label="课程最低学分"
            :labelCol="{span: 14}"
            :wrapperCol="{span: 6, offset: 1}"
          >
            <a-input-number style="width: 100%" v-decorator="['kczxf',
              {
                rules: [{ required: true, message: '请输入课程总学分!' }],
              }]" disabled/>
          </a-form-item>
          <a-form-item
            label="课程最高学分"
            :labelCol="{span: 14}"
            :wrapperCol="{span: 6, offset: 1}"
          >
            <a-input-number style="width: 100%" v-decorator="['kczgxf',
              {
                rules: [{ required: true, message: '请输入课程总学分!' }],
              }]" disabled/>
          </a-form-item>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="half-height-block">
          <a-form-item
            label="必修课学分"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number :min="temp.bxkxf" @blur='kcxfChange' style="width: 100%" v-decorator="['bxkxf',
              {
                rules: [{ required: true, message: '请输入必修课学分!' }],
              }]"/>
          </a-form-item>
          <a-form-item
            label="选修课学分"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number :min="temp.xxkxf" @blur='kcxfChange' style="width: 100%" v-decorator="['xxkxf',
              {
                rules: [{ required: true, message: '请输入选修课学分!' }],
              }]"/>
          </a-form-item>
          <a-form-item
            label="学位课学分"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number :min="temp.xwkxf" @blur='kcxfChange' style="width: 100%" v-decorator="['xwkxf',
              {
                rules: [{ required: true, message: '请输入学位课学分!' }],
              }]"/>
          </a-form-item>
<!--          <a-form-item
            label="实践环节学分"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number @blur='kcxfChange' style="width: 100%" v-decorator="['sjhjxf',
              {
                rules: [{ required: true, message: '请输入实践环节学分!' }],
              }]"/>
          </a-form-item>-->
        </div>
      </a-col>
      <a-col :span="4">
        <div class="half-height-block">
          <a-form-item
            label="必修课门数"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number :min="temp.bxkms" style="width: 100%" v-decorator="['bxkms',
              {
                rules: [{ required: true, message: '请输入必修课门数!' }],
              }]"/>
          </a-form-item>
          <a-form-item
            label="选修课门数"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number :min="temp.xxkms" style="width: 100%" v-decorator="['xxkms',
              {
                rules: [{ required: true, message: '请输入选修课门数!' }],
              }]"/>
          </a-form-item>
          <a-form-item
            label="学位课门数"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number :min="temp.xwkms" style="width: 100%" v-decorator="['xwkms',
              {
                rules: [{ required: true, message: '请输入学位课门数!' }],
              }]"/>
          </a-form-item>
<!--          <a-form-item
            label="学术活动学分"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number @blur='kcxfChange' style="width: 100%" v-decorator="['xshdxf',
              {
                rules: [{ required: true, message: '请输入学术活动学分!' }],
              }]"/>
          </a-form-item>-->
        </div>
        <!-- <div class="half-height-block"></div> -->
      </a-col>
      <a-col :span="5">
        <div class="half-height-block">
          <a-form-item
            label="论文研究总学分"
            :labelCol="{span: 14}"
            :wrapperCol="{span: 6, offset: 1}"
          >
            <a-input-number style="width: 100%" v-decorator="['lwyjzxf',
              {
                rules: [{ required: true, message: '请输入论文研究总学分!' }],
              }]" disabled/>
          </a-form-item>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="half-height-block">
          <a-form-item
            label="开题报告学分"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number @blur='lwxfChange' style="width: 100%" v-decorator="['ktbgxf',
              {
                rules: [{ required: true, message: '请输入开题报告学分!' }],
              }]" disabled/>
          </a-form-item>
          <a-form-item
            label="中期考核学分"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number @blur='lwxfChange' style="width: 100%" v-decorator="['zqkhxf',
              {
                rules: [{ required: true, message: '请输入中期考核学分!' }],
              }]" disabled/>
          </a-form-item>
          <a-form-item
            label="预答辩学分"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number @blur='lwxfChange' style="width: 100%" v-decorator="['ydbxf',
              {
                rules: [{ required: true, message: '请输入预答辩学分!' }],
              }]" disabled/>
          </a-form-item>
          <a-form-item
            label="学位论文学分"
            :labelCol="{span: 14,offset: 1}"
            :wrapperCol="{span: 5, offset: 1}"
          >
            <a-input-number @blur='lwxfChange' style="width: 100%" v-decorator="['xwlwxf',
              {
                rules: [{ required: true, message: '请输入学位论文学分!' }],
              }]" disabled/>
          </a-form-item>
        </div>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
export default {
  props: ['pymsmc', 'temp'],
  data () {
    return {
      total: 0,
      form: this.$form.createForm(this)
    }
  },
//   computed: {
//     kczxf () {
//       return
//       this.form.getFieldValue('bxkxf') +
//       this.form.getFieldValue('xxkxf') +
//       this.form.getFieldValue('xwkxf')
//       // this.form.getFieldValue('sjhjxf')
//     }
// // lwyjzxf
//   },
  methods: {
    kcxfChange() {
      let bxkxf = this.form.getFieldValue('bxkxf') ? this.form.getFieldValue('bxkxf') : 0
      let xxkxf = this.form.getFieldValue('xxkxf') ? this.form.getFieldValue('xxkxf') : 0
      let xwkxf = this.form.getFieldValue('xwkxf') ? this.form.getFieldValue('xwkxf') : 0
      // let sjhjxf = this.form.getFieldValue('sjhjxf') ? this.form.getFieldValue('sjhjxf') : 0
      this.total =+ bxkxf + xxkxf + xwkxf
      // this.form.setFieldsValue({kczxf: total})

    },
    lwxfChange() {
      let ktbgxf = this.form.getFieldValue('ktbgxf') ? this.form.getFieldValue('ktbgxf') : 0
      let zqkhxf = this.form.getFieldValue('zqkhxf') ? this.form.getFieldValue('zqkhxf') : 0
      let ydbxf = this.form.getFieldValue('ydbxf') ? this.form.getFieldValue('ydbxf') : 0
      let xwlwxf = this.form.getFieldValue('xwlwxf') ? this.form.getFieldValue('xwlwxf') : 0
      let total = +ktbgxf + zqkhxf + ydbxf + xwlwxf
      this.form.setFieldsValue({lwyjzxf: total})
    }
  }
}
</script>

<style lang="less" scoped>
.credit-input-wrap{
  // width: 1400px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  // margin-bottom: 40px;
  overflow: auto;
  .ant-form-item{
    margin-bottom: 0px !important;
  }
  .credit-big-cate{
    display:flex;
    align-items:center;
    justify-content: center;
    // margin: 5px;
    background-color: rgb(221, 248, 255);
  }
  .half-height-block{
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: rgb(221, 248, 255);
    // margin: 5px;
    justify-content: center;
    border: 1px solid #fff;
    padding: 0 5px;
  }
}
</style>
